<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="图标图标/iconfont.css">
</head>

<body>
    <header>
        <div class="index_nav">
            <p class="on">推荐</p>
            <P>VIP</P>
            <P>小说</P>
            <P>直播</P>
            <P>儿童</P>
            <P>播客</P>
            <P>相声评书</P>
            <P>广播</P>
            <P>精选</P>
            <p>人文</p>
            <p>历史</p>
            <p>畅销书</p>
            <p>好书精讲</p>
            <p>头条</p>
            <p>音乐</p>
            <p>娱乐</p>
            <p>情感生活</p>
            <p>个人成长</p>
            <p>商业财经</p>
            <p>英语</p>
            <p>少儿教育</p>
            <p>健康养身</p>
            <p>科技</p>
            <p>国学</p>
            <p>影视</p>
            <p>二次元</p>
            <p>旅游</p>
            <p>时尚生活</p>
            <p>戏曲</p>
            <p>体育</p>
            <img src="img/1.jpg" alt="">
        </div>
        <div class="index_search">
            <div class="search_box">
                <input type="text" placeholder="重生">
                <img src="img/2.jpg" alt="" class="one">
                <span>|</span>
                <img src="img/3.jpg" alt="" class="two">
            </div>
            <img src="img/4.png" alt="" class="there">
        </div>
    </header>
    <section>
        <!-- 轮播图 -->
        <div class="ban">
            <img src="img/5.jpg" alt="">
        </div>
        <!-- 选项dl -->
        <div class="option_nav">
            <dl>
                <dt>
                    <img src="img/6.jpg" alt="">
                </dt>
                <dd>排行榜</dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/7.jpg" alt="">
                </dt>
                <dd>分类</dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/8.jpg" alt="">
                </dt>
                <dd>助眠专注</dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/9.jpg" alt="">
                </dt>
                <dd>精选</dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/10.jpg" alt="">
                </dt>
                <dd>新品</dd>
            </dl>
        </div>
        <div class="headline">
            <img src="img/11.jpg" alt="" class="one">
            <img src="img/13.jpg" alt="" class="two">
            <p></p>
            <img src="img/12.jpg" alt="" class="there">
        </div>
        <div class="guess_like">
            <div class="guess_like_top">
                <p>猜你喜欢</p>
                <div class="update">
                    <img src="img/14.jpg" alt="">
                    <p>换一批</p>
                </div>
            </div>
            <div class="guess_like_bottom">
                <dl>
                    <dt>
                        <img src="img/16.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">把生活过成自己想要的样子</p>
                        <p class="two">每天不到十分钟，就会过得很想幸福</p>
                        <p class="there"><img src="img/15.jpg" alt=""><span>21.7</span>万</p>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/17.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">别等失去了才懂得珍惜</p>
                        <p class="two">专辑：夜听</p>
                        <p class="there"><img src="img/15.jpg" alt=""><span>26.7</span>万</p>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/16.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">把生活过成自己想要的样子</p>
                        <p class="two">每天不到十分钟，就会过得很想幸福</p>
                        <p class="there"><img src="img/15.jpg" alt=""><span>21.7</span>万</p>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="choiceness">
            <p>精选</p>
            <div class="ban">
                <img src="img/18.jpg" alt="">
                <img src="img/19.jpg" alt="">
                <img src="img/20.jpg" alt="">
                <img src="img/18.jpg" alt="">
            </div>
            <div class="choiceness_bottom">
                <dl>
                    <dt>
                        <img src="img/16.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">把生活过成自己想要的样子</p>
                        <p class="two">每天不到十分钟，就会过得很想幸福</p>
                        <p class="there"><img src="img/15.jpg" alt=""><span>21.7</span>万</p>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/17.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">别等失去了才懂得珍惜</p>
                        <p class="two">专辑：夜听</p>
                        <p class="there"><img src="img/15.jpg" alt=""><span>26.7</span>万</p>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/16.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">把生活过成自己想要的样子</p>
                        <p class="two">每天不到十分钟，就会过得很想幸福</p>
                        <p class="there"><img src="img/15.jpg" alt=""><span>21.7</span>万</p>
                    </dd>
                </dl>
            </div>
        </div>
    </section>
    <footer>
        <dl>
            <dt class="iconfont icon-shouye"></dt>
            <dd>首页</dd>
        </dl>
        <dl>
            <dt class="iconfont icon-erji"></dt>
            <dd>我听</dd>
        </dl>
        <dl class="cen">
            <dt class="iconfont icon-bofang3"></dt>

        </dl>
        <dl>
            <dt class="iconfont icon-faxiandingdan"></dt>
            <dd>发现</dd>
        </dl>
        <dl>
            <dt class="iconfont icon-xiaoxi"></dt>
            <dd>账号</dd>
        </dl>
    </footer>
    <script src="js/flexble.js"></script>
</body>

</html>